<template>
	<view>
		<b-navigator :active-index="activeIndex"></b-navigator>
		<b-header></b-header>
		  
<!-- 		 <view class="main">
		 		<match-media :min-width="768">
		 	  <el-radio-group v-model="tabPosition" size="large" text-color='#fff' fill='#ea6101' style="margin-bottom: 30px" @change="radioChange">
		 	    <el-radio-button v-for="(item, index) in radioList" :value="item.value">{{item.name}}</el-radio-button>
		 	  </el-radio-group>
		 	  </match-media>
		 	  <match-media :max-width="768">
		 		   <u-sticky bgColor="#fff">
		 		  <u-tabs :list="radioList" @click="radioPChange"></u-tabs>
		 		  </u-sticky>
		 	  </match-media>
		 </view> -->
		 <view class="main">
		 	<view class="news-list-wrap">
		 		<view v-for="(item, index) in healthList" class="news-list-item" @click="handleoldHealthRoute(item.id)" :key="index">
		 			<view class="news-image-wrap"><image class="news-image" :src="baseUrl + item.imageUrl" mode="aspectFill"></image></view>
		 			<view class="news-content">
		 				<view class="news-title">{{ item.name.slice(0,45) }}</view>
		 				<view class="news-des">{{ item.content.slice(0,200) }}</view>
		 				<!-- <button type="default" size="mini" class="read-more-btn" @click="vk.navigateTo('/pages/news/read?id='+item._id)">查看详情</button> -->
		 			</view>
		 		</view>
		 		<el-pagination v-model:current-page="currentPage" 
		 		               v-model:page-size="pageSize" 
		 					   style="display: flex;justify-content: center;; width: 100%; padding: 8px;"
		 		                small layout="prev, pager, next" :total="total"
		 		                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		 	</view>
		 </view>
		 <b-footer></b-footer>
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bFooter from '../../components/b-footer.vue'
	import bHeader from '../../components/b-header.vue'
	import { getDicts, oldHealthList } from '../../config/api'
	import { baseUrl } from '../../config/config'
	import { route } from '@/uni_modules/uview-plus';
	export default {
		components: { bNavigator, bFooter, bHeader },
		data() {
			return {
				activeIndex: '/pages/oldhealth/index',
				tabPosition: '1',
				total: 0,
				currentPage: 1,
				pageSize: 10,
				radioList: [
					{name: '老年养生', value: '1'},
					{name: '养生1',value: '2'},
					{name: '养生2',value: '3'},],
				healthList: [
					{ title: '通知公告', content: '内容'},
					{ title: '通知公告', content: '内容'},
					{ title: '通知公告', content: '内容'},
					{ title: '通知公告', content: '内容'}],
				baseUrl: baseUrl.slice(0,baseUrl.length-1)
			}
		},
		onLoad() {
			const Params = {
				type: '',
				pageNum: this.currentPage,
				pageSize: this.pageSize
			}
			this.getoldHealthList(Params)
			this.getDictData()
		},
		methods: {
			getDictData() {
				getDicts('yl_health_type').then(res => {
					this.radioList = res.data.map(p => ({ name: p.dictLabel, value: p.dictValue}))
				})
			},
			getoldHealthList(Params) {
				oldHealthList(Params).then(res => {
					this.healthList = res.rows
					this.total = res.total
					this.healthList.forEach(item => {
						let re1 = new RegExp("<.+?>", "g");
						let reg = new RegExp('&nbsp;', 'g')// g代表全部
						item.content = item.content.replace(re1, "").replace(reg, ' ');
					})
				
				})
			},
			radioChange(value) {
				const Params = {
					type: value,
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}
				this.getoldHealthList(Params)
				
			},
			radioPChange(item) {
				const Params = {
					type: item.value,
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}
				this.getoldHealthList(Params)
			},
			handleSizeChange(val) {
			   this.pageSize = val
			   this.getoldHealthList(Params)
			
			 },
			 handleCurrentChange(val) {
			   this.currentPage = val
			   this.getoldHealthList(Params)
			 },
			 handleoldHealthRoute(viewId) {
			 				 route('/pages/oldhealth/view', {
			 				 	id: viewId
			 				 });
			 }
		
		}
	}
</script>

<style>
.news-list-wrap {
	width: 100%;

	.news-list-item {
		padding: 20px;
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		border-radius: 4px;
		display: flex;
		align-items: flex-start;
		position: relative;

		.news-image-wrap {
			width: 300px;
			margin-right: 20px;
			overflow: hidden;

			.news-image {
				width: 200px;
				height: 100px;
				transition: all 0.3s linear;
			}

			&:hover {
				image {
					transform: scale(1.1);
				}
			}
		}

		.news-content {
			width: 60%;
			position: relative;
			/* height: 200px; */

			.news-date {
				color: #ea6101;
				margin-bottom: 5px;
			}

			.news-date,
			.news-title {
				font-weight: bold;
				margin-bottom: 15px;
			}

			.news-title {
				font-size: 20px;

				&:hover {
					color: #ea6101;
				}
			}

			.news-des {
				font-size: 16px;
				color: #888888;
				margin-bottom: 15px;
			}

			.read-more-btn {
				position: absolute;
				right: 0px;
				bottom: 0px;
			}
		}

		&:after {
			content: '';
			width: 0;
			height: 4px;
			background-color: #ea6101;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: all 0.2s linear;
			border-bottom-right-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:hover::after {
			width: 100%;
		}
	}
}


@media screen and (max-width: 960px) {
	.main {
		flex-direction: column;
		
	}

	.news-list-wrap {
		width: 87%;

		.news-list-item {
			flex-direction: column;
			padding: 20rpx;

			.news-image-wrap {
				width: 100%;
				height: 250rpx;
				margin-bottom: 20rpx;

				.news-image {
					width: 100%;
					height: 250rpx;
				}
			}

			.news-content {
				width: 100%;
			/* height: 200rpx; */

				.read-more-btn {
					display: none;
				}
			}
		}
	}
}
</style>
